<template>
  <div>
    <template>
  <div>
    <div class="idquery">
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <div class="btn"><el-button type="primary">添加员工</el-button></div>
    </div>

    <div class="listdetail">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="province" label="省份"> </el-table-column>
        <el-table-column prop="city" label="市区"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="zip" label="邮编"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="success"
              size="small"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="deleteing(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

   <!-- <aa></aa> -->
   <yy></yy>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="50"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import yy from '../../components/xy/Xy'
// import aa from "./components/excel/Excel"
export default {
  name: "",
  props: {},
  data() {
    return {
      input3: "",
      currentPage4: 4,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ]
    };
  },
  components: {
    // aa,
    yy
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //点击删除
    deleteing(item, index) {
      //调用组件的方法，展现完美
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(item, index);
          // this.getdelete({
          //   id: bbb.id
          // });
          // this.getUsers({
          //   query: "",
          //   pagenum: this.pagenum,
          //   pagesize: this.pagesize
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {},
  computed: {},
  watch: {}
};
</script>

<style lang='scss' scoped>
.idquery {
  width: 500px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  display: flex;
  .btn {
    margin-left: 20px;
  }
}
.block {
  margin-top: 20px;
  margin-left: 20px;
}
.listdetail {
  margin-left: 20px;
}
</style>
  </div>
</template>

<script>
export default {
  name: '',
  props:{},
  data () {
    return {
    }
  },
  components: {},
  methods: {},
  mounted() {},
  computed: {},
  watch: {}
}
</script>

<style lang='scss' scoped>

</style>